<template>
  <div class="box">
    <img :src="icon" class="h-icon"/>
    <span class="text">
      <span class="title">{{title}}</span>
      <span v-if="number">(<span class="num">{{number}}</span>)</span>
      <span class="tags" v-if="tags" v-for="(item,index) in tags" :key="index">{{item}}</span>
      <span class="load" v-if="load" @click.stop="load">查看全部<i class="iconfont icon-dextrad"></i></span>
      <span class="filter" v-if="isFilter">
        <span @click="filters" >
          <i class="icon iconfont icon-filter" style="color:#45a3eb"></i>
          <span>筛选</span>
          <i class="icon iconfont icon-down-trangle"></i>
        </span>
        <!-- <div class="filter_box"></div> -->
        <slot name="filterBox" class="filter_box"></slot>
      </span>
    </span>
  </div>
</template>

<script>
  export default {
    name: 'block-header',
    components: {},
    mixins: [],
    computed: {},
    props: {
      icon: '',
      title: '',
      number: '',
      tags: {
        type: Array,
        default() {
          return []
        }
      },
      load: {
        type: Function,
        default: null
      },
      isFilter: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {}
    },
    methods: {
      filters() {
        this.$emit('filter')
      }
    },
    watch: {},
    mounted() {
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .box {
    background: #fbfbfb;
    height: 3rem;
    padding-left: .5rem;
    .h-icon {
      width: 1.2rem;
      height: 1.2rem;
      vertical-align: text-bottom;
    }
    .text {
      padding-left: .1rem;
      line-height: 3rem;
      font-size: 1.05rem;
      .title {
        color: #000000;
      }
      .tags {
        font-size: .5rem;
        padding: .2rem .5rem;
        background: #ff6600;
        color: #fff;
        border-radius: .9rem;
        margin-right: .3rem;
        vertical-align: top;
      }
      .num {
        color: #f44646;
      }
      .load {
        color: #333;
        float: right;
        margin-right: .2rem;
      }
      .filter {
        color: #333;
        float: right;
        margin-right: 1rem;
        position: relative;
      }
        .filter_box {
          // float: right;
          margin-right: 1rem;
          position: absolute;
          right: 0%;
          top: 100%;
          width: 20rem;
          height: 12rem;
          background-color: #fff;
          border: 1px solid #ccc;
        }
    }
  }
</style>
